import React, { useEffect, useState } from 'react';
import { Category, CategoryStats } from '../../types';

interface FilterBarProps {
  categories: Category[];
  selectedCategories: string[];
  onCategorySelect: (categories: string[]) => void;
  categoryStats?: CategoryStats[];
}

const FilterBar: React.FC<FilterBarProps> = ({ 
  categories, 
  selectedCategories, 
  onCategorySelect,
  categoryStats = []
}) => {
  const [isExpanded, setIsExpanded] = useState(false);

  // 处理分类点击
  const handleCategoryClick = (categoryId: string) => {
    if (selectedCategories.includes(categoryId)) {
      // 如果已经选中，则移除
      onCategorySelect(selectedCategories.filter(id => id !== categoryId));
    } else {
      // 否则添加到选中列表
      onCategorySelect([...selectedCategories, categoryId]);
    }
  };

  // 清除所有选择
  const handleClearAll = () => {
    onCategorySelect([]);
  };

  // 根据分类ID获取样式类名
  const getCategoryClassName = (categoryId: string) => {
    const baseClasses = 'px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200 flex items-center';
    
    // 根据分类ID设置颜色
    const colorClasses: Record<string, string> = {
      '1': selectedCategories.includes(categoryId) ? 'bg-blue-500 text-white' : 'bg-blue-100 text-blue-700 hover:bg-blue-200',
      '2': selectedCategories.includes(categoryId) ? 'bg-green-500 text-white' : 'bg-green-100 text-green-700 hover:bg-green-200',
      '3': selectedCategories.includes(categoryId) ? 'bg-yellow-500 text-white' : 'bg-yellow-100 text-yellow-700 hover:bg-yellow-200',
      '4': selectedCategories.includes(categoryId) ? 'bg-purple-500 text-white' : 'bg-purple-100 text-purple-700 hover:bg-purple-200',
      '5': selectedCategories.includes(categoryId) ? 'bg-red-500 text-white' : 'bg-red-100 text-red-700 hover:bg-red-200',
      '6': selectedCategories.includes(categoryId) ? 'bg-pink-500 text-white' : 'bg-pink-100 text-pink-700 hover:bg-pink-200',
      '7': selectedCategories.includes(categoryId) ? 'bg-indigo-500 text-white' : 'bg-indigo-100 text-indigo-700 hover:bg-indigo-200',
      '8': selectedCategories.includes(categoryId) ? 'bg-gray-500 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200',
    };
    
    return `${baseClasses} ${colorClasses[categoryId] || colorClasses['8']}`;
  };

  // 获取分类的统计信息
  const getCategoryStat = (categoryId: string) => {
    const stat = categoryStats.find(stat => stat.id === categoryId);
    if (!stat || stat.count === 0) return null;
    
    return (
      <span className="ml-2 text-xs bg-opacity-80 px-1.5 py-0.5 rounded-full">
        {stat.count}
      </span>
    );
  };

  return (
    <div className="filter-bar mb-4">
      <div className="flex items-center justify-between mb-2">
        <h2 className="text-sm font-medium text-gray-700">按分类筛选</h2>
        {selectedCategories.length > 0 && (
          <button 
            onClick={handleClearAll}
            className="text-xs text-blue-600 hover:text-blue-800"
          >
            清除全部
          </button>
        )}
      </div>

      <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
        {categories.map((category) => (
          <button
            key={category.id}
            onClick={() => handleCategoryClick(category.id)}
            className={getCategoryClassName(category.id)}
          >
            {category.name}
            {getCategoryStat(category.id)}
          </button>
        ))}
      </div>
    </div>
  );
};

export default FilterBar; 